function randomId() {
	return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

function createElement(tag, classNames) {
	let element = document.createElement(tag);
	element.setAttribute("class", classNames);
	return element;
}

class Html {
	constructor(arg) {
		this.element = arg;
		this.name = null;
	}

	getName() {
		return this.name;
	}

	getElement() {
		return this.element;
	}

	show() {
		this.element.style.display = "block"
	}

	hide() {
		this.element.style.display = "hide"
	}
}

/**
 * dom创建工具，未完成
 * @param {Object} tag
 * @param {Object} {class:"node-title"}
 * @param {Object} c nullable
 */
function h(tag, attributes, c) {
	let e = document.createElement(tag);
	if (typeof(attributes) == 'object') {
		for (let key in attributes) {
			if (key) {
				e.setAttribute(key, attributes[key])
			}
		}
	} else if (typeof(attributes) == 'string') {
		e.setAttribute("class", attributes);
	}
	if (c) {
		if (typeof(c) == 'string') {
			e.innerHTML = c;
		} else {
			if (c.length) {
				for (var i = 0; i < c.length; i++) {
					e.appendChild(c[i]);
				}
			} else {
				e.appendChild(c);
			}
		}
	}
	return e;
}

function span(attributes, child) {
	return h('span', attributes, child);
}

function label(attributes, child) {
	return h('label', attributes, child);
}

function div(attributes, child) {
	return h('div', attributes, child);
}

function img(attributes, child) {
	return h('img', attributes, child);
}

function input(type, attributes, child) {
	let finalAttributes = {};
	if (attributes) {
		if (typeof(attributes) == 'object') {
			finalAttributes = attributes;
		} else {
			finalAttributes['class'] = attributes;
		}
	}
	finalAttributes.type = type;

	return h('input', finalAttributes, child);
}


class NodeTitle {
	constructor(txt) {
		this.flowNode = null;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-title");
		this.elementLabel = createElement("div", "label");
		this.elementLabel.innerHTML = txt;
		this.elementCloseBtn = createElement("div", "close-btn");
		this.elementCloseBtn.innerHTML = "×";
		this.element.appendChild(this.elementLabel);
		this.element.appendChild(this.elementCloseBtn);
		this.elementCloseBtn.addEventListener("click", (e) => {
			this.flowNode.remove();
			return false;
		})
	}

	setTitle(title) {
		this.elementLabel.innerHTML = title;
	}
	
	disabled(){
		this.element.setAttribute("class",this.element.getAttribute("class")+" disabled")
	}
	
	enable(){
		this.elementCloseBtn.style.display="block";
	}

	setFlowNode(flowNode) {
		this.flowNode = flowNode;
	}

	showCloseBtn() {
		this.elementCloseBtn.style.display = "block";
	}
	hideCloseBtn() {
		this.elementCloseBtn.style.display = "none";
	}

	getElement() {
		return this.element;
	}
}

class NodeContent {
	constructor(txt, flowNode) {
		this.flowNode = flowNode;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-content");
		this.element.innerHTML = txt;
		//监听点击事件
		this.clickEventHandler = (e) => {
			approvalAttributes.show(this.flowNode)
		};
		this.element.addEventListener("click",this.clickEventHandler , true)
	}

	getElement() {
		return this.element;
	}
	
	disabled(){
		this.element.removeEventListener("click",this.clickEventHandler,true)
	}

	setData(data) {
		let nodeType = this.flowNode.getFlowType();
		if (nodeType === "approval") {
			this.element.innerHTML=new ApprovalNodeContentPanel(data).getElement()
		}else if(nodeType === "condition"){
			this.element.innerHTML=new ConditionNodeContentPanel(data).getElement()
		}else{
			let approvers = data.approvalTargets;
			if (approvers) {
				let content = "";
				for (var i = 0; i < approvers.length; i++) {
					let approver = approvers[i];
					content += "<div>" + approver.target + "：" + approver.users[0] + "</div>"
				}
				this.element.innerHTML = content;
			}
		}
	}

	appendChild(obj) {
		this.element.appendChild(ele.getElement());
	}
}

class ApprovalNodeContentPanel{
	constructor(data){
		this.data =data;
	}
	
	getElement(){
		if(this.data.approvalMethod==="自动通过"){
			return "自动通过";
		}else{
			let approvers = this.data.approvalTargets;
			if (approvers) {
				let content = "";
				for (var i = 0; i < approvers.length; i++) {
					let approver = approvers[i];
					content += "<div>" + approver.target + "：" + (approver.users[0]?approver.users[0]:"请选择审批人") + "</div>"
				}
				return content;
			}
		}
	}
}

class ConditionNodeContentPanel{
	constructor(data){
		this.data =data;
	}
	
	getElement(){
		if(this.data.conditionGroups.length==0){
			return this.data.placeholder;
		}else{
			let conditionGroups = this.data.conditionGroups;
			if (conditionGroups) {
				let content = "";
				for (var i = 0; i < conditionGroups.length; i++) {
					let conditionGroup = conditionGroups[i];
					for (var j = 0; j < conditionGroup.conditions.length; j++) {
						let condition=conditionGroup.conditions[j];
						content += "<div>" + condition.field + "（" +condition.expression +"）"+condition.target+"</div>"
					}
					
				}
				return content;
			}
		}
	}
}


class NodeLine {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-line");
	}

	getElement() {
		return this.element;
	}
}

class NodeArrow {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-arrow");
	}

	getElement() {
		return this.element;
	}
}

class NodeAddBtn {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypeBtns = null;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "add-node-btn");
		let addBtn = document.createElement("div");
		addBtn.setAttribute("class", "add-btn");
		addBtn.innerHTML = "+";
		addBtn.addEventListener('click', (e) => {
			this.addNodeTypeBtns.show();
		})
		this.element.appendChild(addBtn);

		//挂载添加按钮组
		this.addNodeTypeBtns = new AddNodeTypeBtns(this.flowNode);
		this.appendChild(this.addNodeTypeBtns)

	}

	appendChild(obj) {
		this.element.appendChild(obj.getElement());
	}

	setFlowNode(flowNode) {
		this.flowNode = flowNode;
	}

	getElement() {
		return this.element;
	}
}

class NodeContainer {
	constructor(name, type) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node-container ");
		this.titleElement = null;
		this.contentElement = null;
		//初始化鼠标悬浮事件
		this.initEventListeners();
	}

	initEventListeners() {
		//初始化鼠标移入事件
		this.element.addEventListener("mouseenter", (e) => {
			this.titleElement.showCloseBtn();
		}, true)

		//初始化鼠标移出事件
		this.element.addEventListener("mouseout", (e) => {
			this.titleElement.hideCloseBtn();
		}, true)
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	setTitle(titleElement) {
		this.titleElement = titleElement;
		this.element.appendChild(titleElement.getElement());
	}

	setContent(contentElement) {
		this.contentElement = contentElement;
		this.element.appendChild(contentElement.getElement());
	}

	setData(data) {
		this.contentElement.setData(data);
	}

	getElement() {
		return this.element;
	}
}

/**
 * 审批节点模板
 */
var flowNodeApprovalDataTemplate = {
	approvalName: "审批3",
	flowType: "approval",
	approvalMethod: "人工审批",
	placeholder: "提交人：请选择审批人",
	approvalTargets: [{
		target: "指定成员",
		users: []
	}],
	approverNoExistWhen: {
		action: "自动通过"
	},
	approverPresentWhen: {
		action: "自动跳过"
	},
	approverMultipleWhen: {
		action: "会签"
	},
	ccTargets: []
};

var flowNodeCcDataTemplate = {
	approvalName: "抄送",
	flowType: "cc",
	placeholder: "抄送人：请选择抄送人",
	ccTargets: [{
		target: "指定成员",
		users: []
	}]
};

var flowNodeStartDataTemplate = {
	approvalName: "提交",
	flowType: "start",
	placeholder: "发起流程",
	ccTargets: [{
		target: "指定成员",
		users: []
	}]
};

var flowNodeEndDataTemplate = {
	approvalName: "结束",
	flowType: "end",
	placeholder: "流程结束",
	ccTargets: [{
		target: "指定成员",
		users: []
	}]
};


var flowNodeConditionDataTemplate = {
	approvalName: "条件分支",
	flowType: "condition",
	placeholder: "请设置条件",
	conditionGroups:[
		{
			name:"条件1",
			conditions:[
			{
				field:"姓名",
				expression:"等于",
				target:"李飞飞"
			},
			{
				field:"姓名",
				expression:"等于",
				target:"李飞飞"
			}
		]
		}
	]
};

class FlowNodeTemplate {
	constructor() {
		
	}

	getTemplate(type) {
		if (type === "approval") {
			return flowNodeApprovalDataTemplate;
		}

		if (type === "cc") {
			return flowNodeCcDataTemplate;
		}

		if (type === "start") {
			return flowNodeStartDataTemplate;
		}

		if (type === "end") {
			return flowNodeEndDataTemplate;
		}

		if (type === "condition") {
			return flowNodeConditionDataTemplate;
		}

		return null;
	}
}
var flowNodeTemplateSupplier = new FlowNodeTemplate();

class FlowNode {
	constructor(name, type, flowNodes) {
		this.flowType = type;
		this.name = name;
		this.approvalAttributeData = flowNodeTemplateSupplier.getTemplate(type);
		this.element = document.createElement("div");
		this.flowNodeContainer = null;
		this.element.setAttribute("class", "flow-node " + type);
		this._createNodeContainer();

		this.nextFlowNode = null;
		this.flowNodes = flowNodes;
	}

	setTitle(title) {
		this.nodeTitle.setTitle(title);
	}
	
	disabled(){
		this.nodeTitle.disabled();
		this.nodeContent.disabled();
	}

	getApprovalAttributeData() {
		return this.approvalAttributeData;
	}

	getData() {
		return this.approvalAttributeData;
	}

	setData(approvalAttributeData) {
		this.approvalAttributeData = approvalAttributeData;
		this.setTitle(this.approvalAttributeData.approvalName);
		//审批内容
		this.flowNodeContainer.setData(this.approvalAttributeData)
	}

	_createNodeContainer() {
		let flowNodeContainer = new NodeContainer(this.name, this.flowType);
		this.nodeTitle = new NodeTitle(this.name);
		this.nodeTitle.setFlowNode(this);
		flowNodeContainer.setTitle(this.nodeTitle);
		if (this.approvalAttributeData) {
			this.nodeContent = new NodeContent((this.approvalAttributeData.placeholder ? this.approvalAttributeData
				.placeholder : ""), this);
			flowNodeContainer.setContent(this.nodeContent);
		}

		this.appendChild(flowNodeContainer);

		if (this.flowType != "end") {
			let nodeLine = new NodeLine();
			let nodeAddBtn = new NodeAddBtn(this);
			let nodeArrow = new NodeArrow();
			this.appendChild(nodeLine);
			this.appendChild(nodeAddBtn);
			this.appendChild(nodeArrow);
			nodeAddBtn.setFlowNode(this);
		}
		this.element.appendChild(flowNodeContainer.getElement());
		this.flowNodeContainer = flowNodeContainer;
	}

	_createConditionNode() {
		let flowNodes = new flowNodes();

	}

	addNext(name, type) {
		let current = this.element;
		let parent = current.parentNode;
		let nextNode = current.nextElementSibling;

		let newFlowNode = null;
		if (type == "condition") {
			newFlowNode = new FlowNodeRoute();
			newFlowNode.init()
		} else {
			newFlowNode = new FlowNode(name, type)
		}
		let newElement = newFlowNode.getElement();
		parent.insertBefore(newElement, nextNode);
		this.flowNodes.insertFlowNode(this, newFlowNode)
	}

	getName() {
		return this.name;
	}

	getFlowType() {
		return this.flowType;
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	setFlowNodes(flowNodes) {
		this.flowNodes = flowNodes;
	}

	remove() {
		this.flowNodes.removeFlowNode(this);
		this.element.parentNode.removeChild(this.element);
	}

	getElement() {
		return this.element;
	}
}

class FlowNodes {
	constructor(route,branch) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node branch");
		//如果是条件分支节点的流程节点则需要加一个顶部引导线
		if (route == "route") {
			let topLineMask = createElement("div", "top-line-mask");
			let topVline = createElement("div", "top-v-line");
			let bottomVarrow = createElement("div", "bottom-v-arrow");
			this.element.appendChild(topLineMask)
			this.element.appendChild(topVline);
			this.element.appendChild(bottomVarrow);
		}
		let nodes = document.createElement("div");
		nodes.setAttribute("class", "nodes");
		this.nodes = nodes;
		this.element.appendChild(nodes);
		//如果是条件分支节点的流程节点则需要加一个底部补充线
		if (route == "route") {
			let bottomVline = createElement("div", "bottom-v-line");
			let bottomLineMask = createElement("div", "bottom-line-mask");

			this.element.appendChild(bottomVline);
			this.element.appendChild(bottomLineMask);
		}
		this.branchs = branch;
		this.flowNodes = [];
	}
	
	setBranchs(branchs){
		this.branchs = branchs;
	}

	removeFlowNode(flowNode) {
		this.flowNodes = this.flowNodes.filter(item => item !== flowNode)
	}

	getFlowNodes() {
		return this.flowNodes;
	}

	addFlowNode(flowNode) {
		flowNode.setFlowNodes(this);
		this.nodes.appendChild(flowNode.getElement());
		this.flowNodes.push(flowNode)
	}

	insertFlowNode(targetFlowNode, flowNode) {
		flowNode.setFlowNodes(this);
		let index = this.getFlowNodeIndex(targetFlowNode) + 1;
		this.flowNodes.splice(index, 0, flowNode);

	}

	getFlowNodeIndex(targetFlowNode) {
		for (var i = 0; i < this.flowNodes.length; i++) {
			let flowNode = this.flowNodes[i]
			if (flowNode == targetFlowNode) {
				return i;
			}
		}
		return this.flowNodes.length;
	}
	
	remove(){
		this.branchs.removeFlowNodes(this)
	}

	getElement() {
		return this.element;
	}
}

/**
 * 条件节点
 */
class FlowConditionNode extends FlowNode {
	constructor(name, type, flowNodes) {
		super(name ? name : "默认分支", type, flowNodes);
		this.isDefault = false;
		//名称为空表示默认分支
		if (name == null) {
			this.disabled();
			this.isDefault = true;
		}
	}
	
	getDefault(){
		return this.isDefault;
	}
	
	remove(){
		//删除整条分支
		this.flowNodes.remove();
	}
}

class Branchs {
	constructor(nodeRoute) {
		this.element = createElement("div", "branchs");
		this.nodeRoute = nodeRoute;
		this.flowNodesList = [];
		//this.initNodeRoute();
	}

	initNodeRoute() {
		let flowNodes1 = this.createFlowNodes("条件分支"+(this.flowNodesList.length+1));
		this.appendChild(flowNodes1);

		let flowNodes2 = this.createFlowNodes(null);
		this.appendChild(flowNodes2);

		this.flowNodesList.push(flowNodes1);
		this.flowNodesList.push(flowNodes2);
	}

	createFlowNodes(conditionName) {
		var rootNode = new FlowNodes("route",this);

		var conditionFlowNode = new FlowConditionNode(conditionName, "condition", rootNode);
		rootNode.addFlowNode(conditionFlowNode);
		
		var approvalFlowNode = new FlowNode("审批节点", "approval", rootNode);
		rootNode.addFlowNode(approvalFlowNode)
		return rootNode;
	}
	
	remove(){
		this.nodeRoute.remove();
		//this.element.parentNode.removeChild(this.element)
	}
	
	removeFlowNodes(flowNodes){
		//删除分支流程之前需判断目前还存在几个条件分支，若只剩2个，则删除整个条件分支模块。否则直接删除当前分支
		if(this.flowNodesList.length>2){
			this.flowNodesList = this.flowNodesList.filter(item => item !== flowNodes)
			this.element.removeChild(flowNodes.getElement());
		}else{
			this.remove()
		}
	}

	getFlowNodesList() {
		return this.flowNodesList;
	}

	addNodeRoute() {
		let flowNodes= this.createFlowNodes("条件分支"+(this.flowNodesList.length+1));
		this.flowNodesList.push(flowNodes)
		return this.appendChild(flowNodes);
	}
	
	addFlowNodes(flowNodes) {
		this.flowNodesList.push(flowNodes)
		return this.appendChild(flowNodes);
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	getElement() {
		return this.element;
	}
}

class FlowNodeRoute extends FlowNode {
	constructor() {
		super("条件分支", "branch");
		this.element = createElement("div", "flow-node route");
		this.branchsElement = null;
		//顶部线
		let topHline = createElement("div", "top-h-line");
		this.element.appendChild(topHline);
		//创建添加按钮
		this._createAddBtn();
		//创建分支容器
		this.branchs = new Branchs(this);
		this.element.appendChild(this.branchs.getElement());
		
		//创建尾部连接器和新增按钮
		this.element.appendChild(createElement("div", "bottom-h-line"));
		this.element.appendChild(createElement("div", "bottom-v-line"));
		
		//菜单按钮
		let nodeAddBtn = new NodeAddBtn(this);
		this.appendChild(nodeAddBtn);
		this.element.appendChild(createElement("div", "bottom-v-arrow"));
	}
	
	init(){
		this.branchs.initNodeRoute();
	}
	
	remove(){
		this.flowNodes.removeFlowNode(this);
		this.element.parentNode.removeChild(this.element);
	}

	getBranchs() {
		return this.branchs;
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	_createAddBtn() {
		let addBtn = createElement("div", "add-branch");
		let addBranchInner = createElement("div", "add-branch-inner");
		let span = document.createElement("span");
		span.innerText = "＋ 添加条件分支";
		addBranchInner.appendChild(span)
		addBtn.addEventListener("click", (e) => {
			this.branchs.addNodeRoute()
		})
		addBtn.appendChild(addBranchInner);
		this.element.appendChild(addBtn)
	}

	getElement() {
		return this.element;
	}
}

class ApprovalNode extends FlowNode {
	constructor(name) {
		super(name)
	}
}

class AddNodeTypeBtns {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypesElements = document.createElement("div");
		this.addNodeTypesElements.setAttribute("class", "add-node-types");
		this.addNodeTypesElements.appendChild(this._createBtn("审批", "imgs/icon/审批人.png", (e) => {
			this.flowNode.addNext('审批', 'approval');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("抄送人", "imgs/icon/抄送人.png", (e) => {
			this.flowNode.addNext('抄送', 'cc');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("办理人", "imgs/icon/办理人.png", (e) => {
			this.flowNode.addNext('办理', 'handle');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("条件分支", "imgs/icon/条件分支.png", (e) => {
			this.flowNode.addNext('条件分支', 'condition');
			this.hide();
		}))
	}

	getElement() {
		return this.addNodeTypesElements;
	}

	show() {
		this.addNodeTypesElements.style.display = "block";
	}

	hide() {
		this.addNodeTypesElements.style.display = "none";
	}

	_createBtn(typeName, iconSrc, clickEventHandle) {
		let nodeTypeWrap = this._createElement("div", "node-type-wrap");
		if (clickEventHandle) {
			nodeTypeWrap.addEventListener('click', clickEventHandle);
		}
		let nodeTypeIcon = this._createElement("div", "node-type-icon");
		let img = this._createElement("img");
		img.setAttribute("src", iconSrc);
		let nodeTypeName = this._createElement("div", "node-type-name");
		nodeTypeName.innerHTML = typeName;
		nodeTypeIcon.appendChild(img);

		let nodeType = this._createElement("div", "node-type");
		nodeType.appendChild(nodeTypeIcon);
		nodeType.appendChild(nodeTypeName);
		nodeTypeWrap.appendChild(nodeType);
		return nodeTypeWrap;
	}

	_createElement(tagName, className) {
		let tag = document.createElement(tagName);
		tag.setAttribute("class", className);
		return tag;
	}
}

/*
class ApprovalNameEditor {
	constructor(arg) {
		this.value = arg;
		this.input = input("text", {
			value: this.value,
			class: "approval-name-editor-input readonly",
			readonly: "readonly"
		});
		this.element = div("approval-editor-name", [
			this.input
		]);

		this.element.addEventListener("click", (e) => {
			this.input.removeAttribute("readonly");
			this.input.style.border = "1px solid #000";
		})

		this.input.addEventListener("focusout", (e) => {
			this.value = e.target.value;
			this.input.setAttribute("readonly", true);
			this.input.style.border = "0px";
		})
	}

	getElement() {
		return this.element;
	}

	getData() {
		return this.value;
	}
}*/

// 初始化审批属性设置界面按钮：审批人、表单权限、操作权限
/*var approvalFunctionBtns = document.getElementsByClassName("approval-function-btn");
for (var i = 0; i < approvalFunctionBtns.length; i++) {
	let approvalFunctionBtn = approvalFunctionBtns[i]
	approvalFunctionBtn.addEventListener("click", (e) => {
		let bs = document.getElementsByClassName("approval-function-btn");
		for (var i = 0; i < bs.length; i++) {
			bs[i].setAttribute("class", bs[i].getAttribute("class").replace("active", ""))
		}
		e.target.setAttribute("class", e.target.getAttribute("class") + " active");
		//联动下方那啥
		let btnId = e.target.getAttribute("id");
		batchHideForClass("setting-panel");
		switch (btnId) {
			case "approver":
				showById("approver-setting-panel")
				break;
			case "formPrmissions":
				showById("form-authority-setting-panel")
				break;
			case "operationPermissions":
				showById("operation-authority-panel")
				break;
		}
	})
}*/

class Element {
	constructor(elements) {
		this.elements = elements;
	}

	getElement() {

	}

	addClassName(className) {
		for (var i = 0; i < this.elements.length; i++) {

		}
	}
}

/**
 * 人员选择器
 */
class UserSelector {
	constructor(arg) {
		let addBtn = div('add-approver-btn', '+');
		this.selectedUsers = [];
		addBtn.addEventListener("click", (e) => {
			let user = prompt("请输入审批人姓名");
			this.appendUserItem(user);

		})
		this.element = div('add-approver-wrapper', addBtn);
	}

	appendUserItem(name, src) {
		this.element.appendChild(new UserItem(name, src).getElement());
		this.selectedUsers.push(name);
	}

	getElement() {
		return this.element;
	}

	getData() {
		return this.selectedUsers;
	}
}

class UserItem {
	constructor(name, src) {
		name = name ? name : "张三";
		src = src ? src :
			"https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&cut_type=&quality=&format=image&sticker_format=.webp";
		this.element = div('add-approver-item', [
			img({
				src: src
			}),
			div('', name),
			new CloseBtn(this).getElement()
		])
	}

	remove() {
		this.element.remove();
	}

	getElement() {
		return this.element;
	}
}

class CloseBtn {
	constructor(userItem) {
		this.userItem = userItem;
		this.element = div('close-btn', '×');
		this.element.addEventListener("click", (e) => {
			this.userItem.remove();
		})
	}

	getElement() {
		return this.element;
	}
}

/**
 * 单选按钮组
 */
class RadioGroup extends Html {
	constructor(group, options, type, event) {
		super(group)
		this.group = group + randomId();
		this.type = type;
		this.value = null;
		this.radios = []

		this.element = div('radio-line-group');
		for (var i = 0; i < options.length; i++) {
			let option = options[i];
			let radio = this._buildItem(option.label, option.value, option.checked, event);
			this.radios.push(radio);
			this.element.appendChild(radio);
		}
	}

	getValue() {
		return this.value;
	}

	setChecked(value) {
		for (var i = 0; i < this.radios.length; i++) {
			let radio = this.radios[i];
			if (radio.value == value) {
				radio.checked = true;
			} else {
				radio.removeAttribute("checked");
			}
		}
	}

	_buildItem(label, value, checked, event) {
		let radioAttributes = {
			value: value,
			name: this.group
		};
		if (checked) {
			this.value = value;
			radioAttributes.checked = true;
		}
		let i = input('radio', radioAttributes);
		let radio = h('label', '', [i, span('', label)]);
		if (this.type == "display-block") {
			radio.setAttribute("class", radio.getAttribute('class') + ' display-block')
		}
		i.addEventListener("click", (e) => {
			this.value = e.target.value
			if (event) {
				event(e);
			}
		})
		return radio;
	}

	hide() {
		this.element.style.display = "none";
	}

	show() {
		this.element.style.display = "block";
	}

	getElement() {
		return this.element;
	}
}


/**
 * tab页签组件
 */
class Tab {
	constructor(items) {
		this.element = div('approval-function-btn-group')
		this.tabItems = [];
		this.tabItemMap = new Map();
		for (var i = 0; i < items.length; i++) {
			let item = items[i]
			this.addItem(item, i == 0);
		}

	}

	addItem(item, active, panel) {
		let tabItem = new TabItem(item, active);
		this.tabItemMap.set(item, panel);
		//订阅事件
		tabItem.subscription(this);
		this.element.appendChild(tabItem.getElement());
		this.tabItems.push(tabItem);
	}

	notify(eventSource) {
		//去除其他元素的class:active
		for (var i = 0; i < this.tabItems.length; i++) {
			let tabItem = this.tabItems[i]
			if (tabItem != eventSource) {
				tabItem.unActive();
			}
		}
	}

	getElement() {
		return this.element;
	}
}

class TabItem {
	constructor(name, active) {
		this.element = div('btn approval-function-btn ' + (active ? 'active' : ''), name);
		this.subscribers = [];
		this.element.addEventListener("click", (e) => {
			for (var i = 0; i < this.subscribers.length; i++) {
				this.element.setAttribute("class", "btn approval-function-btn active");
				let subscriber = this.subscribers[i];
				subscriber.notify(this);
			}
		})
	}

	unActive() {
		this.element.setAttribute("class", "btn approval-function-btn");
	}

	subscription(subscriber) {
		this.subscribers.push(subscriber);
	}

	getElement() {
		return this.element;
	}
}
